<template>
    <div class="app-container">
        <div class="mixin-components-container">
            <el-row class="title">
                <span>订单编号：{{ oid }}</span>
                <span>创建时间：{{ detail.create_time }}</span>
            </el-row>

            <el-row>
                <el-col :xs="8" :sm="8" :lg="8">
                    <div class="chart-wrapper" style="text-align:center">
                        <p class="order-status">订单{{ detail.status_text }}</p>
                        <p class="text-color" v-if="detail.status == 1">请尽快处理发货，若无法发货请及时联系退款</p>
                        <p class="text-color" v-if="detail.status == 2">订单已发货，请提示用户注意快递签收~</p>
                        <p class="text-color" v-if="detail.status == 3 || detail.status == 6">该笔订单已完成交易</p>
                        <p class="text-color" v-if="detail.status == 0">订单还没有付款，库存不足时将无法完成支付！</p>
                        <p class="text-color" v-if="detail.status == 5">订单已关闭！</p>
                        <p>
                            <el-button v-if="detail.status == 0" size="small" type="danger" @click="cancelOrder()">取消订单
                            </el-button>
                            <el-button v-if="detail.status == 0" size="small" type="primary" @click="payedOrders()">确认付款
                            </el-button>
                            <el-button v-if="detail.status == 1" size="small" type="danger" @click="shipOrder()">确认发货
                            </el-button>
                            <el-button v-if="detail.status == 2" size="small" type="danger" @click="confirmOrder()">确认收货
                            </el-button>
                        </p>
                    </div>
                </el-col>
                <el-col :xs="16" :sm="16" :lg="16">
                    <div class="chart-wrapper" style="border-left:0">
                        <el-steps v-if="detail.status == 5" :active="2" align-center>
                            <el-step title="买家下单" :description="detail.create_time"></el-step>
                            <el-step title="订单已关闭" :description="detail.update_time"></el-step>
                        </el-steps>
                        <el-steps v-else :active="detail.status < 3 ? detail.status + 1 : 4" align-center>
                            <el-step title="买家下单" :description="detail.create_time"></el-step>
                            <el-step title="买家付款" :description="detail.order_pay_time"></el-step>
                            <el-step title="商户发货" :description="detail.delivery_time"></el-step>
                            <el-step title="交易完成" :description="detail.confirm_time"></el-step>
                        </el-steps>
                    </div>
                </el-col>
            </el-row>

            <el-row class="label-title">
                <el-col :xs="8" :sm="8" :lg="8">付款信息</el-col>
                <el-col :xs="8" :sm="8" :lg="8">收货信息</el-col>
                <el-col :xs="8" :sm="8" :lg="8">配送信息</el-col>
            </el-row>
            <el-row>
                <el-col :xs="8" :sm="8" :lg="8">
                    <div class="chart-wrapper-info">
                        <p><span>付款金额:</span>￥{{ detail.price }}</p>
                        <p><span>付款方式:</span>{{ detail.payment_type == 1 ? '管理员支付' : '小程序支付' }}</p>
                        <p><span>付款时间:</span>{{ detail.order_pay_time }}</p>
                        <p><span>运费金额:</span>￥{{ detail.distribution_price }}</p>
                        <p><span>优惠总金额:</span>￥{{ detail.discount_price }}</p>
                        <p><span>商品总金额:</span>￥{{ detail.goods_price }}</p>
                        <p><span>付款金额:</span>￥{{ detail.price }}</p>
                    </div>
                </el-col>
                <el-col :xs="8" :sm="8" :lg="8">
                    <div class="chart-wrapper-info" style="border-left:0">
                        <p><span>下单人:</span>{{ detail.member.username || '' }}</p>
                        <p><span>手机号:</span>{{ detail.member.tel }}</p>
                        <p><span>收货人:</span>{{ detail.address.ship_name }}</p>
                        <p><span>联系电话:</span>{{ detail.address.ship_mobile }}</p>
                        <p><span>收货地址:</span>{{ detail.address.ship_area }}{{ detail.address.ship_addr }}</p>
                        <p><span>留言:</span>{{ detail.message }}</p>
                    </div>
                </el-col>

                <el-col :xs="8" :sm="8" :lg="8">
                    <div class="chart-wrapper-info" style="border-left:0">
                        <p><span>物流方式:</span>普通快递</p>
                    </div>
                </el-col>
            </el-row>

            <el-table :data="detail.goods" style="width: 100%">
                <el-table-column label="商品" width="380">
                    <template slot-scope="{row}">
                        <img v-if="row.product_image" :src="row.product_image" class="avatar"
                            style="float:left;margin-right:5px;max-width: 80px;max-height: 80px;padding: 1px;border:1px solid #ddd;"></img>
                        <p class="goods-name">{{ row.goods_name }}</p>
                        <p class="goods-name" v-if="row.spec">规格：{{ row.spec }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="发货状态" align="center">
                    <template slot-scope="{row}">
                        {{ row.delivery_status == 1 ? '已发货' : '未发货' }}
                    </template>
                </el-table-column>
                <el-table-column prop="retail_price" label="价格" align="center"> </el-table-column>
                <el-table-column prop="num" label="数量" align="center"> </el-table-column>
                <el-table-column label="优惠金额" prop="discount_price" align="center"></el-table-column>
                <el-table-column label="小计" align="center">
                    <template slot-scope="{row}">{{ row.price }}</template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { orderDetail, cancelOrder, payedOrder, confirmGoods } from '@/api/order/order'
export default {
    data() {
        return {
            oid: '',
            detail: {},
        }
    },
    beforeMount() {
        this.oid = this.$route.query.oid;
        this.info()
    },

    methods: {
        info: function () {
            //this.listLoading = true
            orderDetail({ oid: this.oid }).then(response => {
                //this.listLoading = false
                this.detail = response.data
            })
        },
        cancelOrder: function () {
            cancelOrder({ oid: this.oid }).then(response => {
                //this.listLoading = false
                if (response.data) {
                    this.$message('取消成功')
                    this.info()
                } else {
                    this.$message(response.data.msg)
                }
            })
        },
        payedOrders: function () {
            payedOrder({ oid: this.oid }).then(response => {
                if (response.data) {
                    this.$message('更新成功')
                    this.info()
                } else {
                    this.$message(response.data.msg)
                }
            })
        },
        confirmOrder: function () {
            confirmGoods({ oid: this.oid }).then(response => {
                if (response.data) {
                    this.$message('操作成功')
                    this.info()
                } else {
                    this.$message(response.data.msg)
                }
            })
        },
        shipOrder: function () {
            this.$router.push({ path: '/order/orderShip?oid=' + this.oid })
        }
    }
}


</script>

<style>
.mixin-components-container {
    background-color: #fff;
    margin-top: 12px;
    min-height: calc(100vh - 84px);
    padding: 18px 30px;
    font-size: 12px;
}

.chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border: 1px solid #f2f3f5;
    height: 180px;
}

.chart-wrapper-info {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border: 1px solid #f2f3f5;
    height: 260px;
}

.title {
    line-height: 42px;
    height: 42px;
}

.title span {
    margin-right: 16px;
}

.order-status {
    font-size: 22px;
    font-weight: 700;
}

.label-title {
    text-align: center;
    background: #fcfcfc;
    height: 36px;
    line-height: 36px;
    border: 1px solid #f2f3f5;
    border-bottom: none;
}

.chart-wrapper-info span {
    text-align: right;
    margin-right: 12px;
    width: 30%;
    display: inline-block;
    color: #000;
}

.chart-wrapper-info {
    line-height: 18px;
    color: #666;
}

.text-color {
    color: #666;
}

.el-table {
    font-size: 12px;
}

.el-table thead th {
    background: #f8f8fa;
    color: #000;
    font-size: 12px;
    padding: 0;
    border-top: 1px solid #f2f3f5;
    height: 36px;
    line-height: 36px;
}

.el-table thead th:first {
    border-left: 1px solid #f2f3f5;
}

.el-table thead th:last-child {
    border-right: 1px solid #f2f3f5;
}

.goods-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 18px
}
</style>